表单和输入组

在本教程中，我们将深入探讨 Bootstrap 中的表单和输入组。表单是网页中常见的元素，用于收集用户输入。Bootstrap 提供了丰富的样式和组件，使得创建美观且功能强大的表单变得非常简单。

1. 表单基础

1.1 表单结构

在 Bootstrap 中，表单的基本结构如下：

<form>
  <div class="form-group">
    <label for="exampleInputEmail1">Email address</label>
    <input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
    <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
  </div>
  <div class="form-group">
    <label for="exampleInputPassword1">Password</label>
    <input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
  </div>
  <button type="submit" class="btn btn-primary">Submit</button>
</form>

1.2 表单控件

Bootstrap 提供了多种表单控件，包括输入框、选择框、单选按钮、复选框等。以下是一些常见的表单控件示例：

<div class="form-group">
  <label for="exampleInputText">Text Input</label>
  <input type="text" class="form-control" id="exampleInputText" placeholder="Enter text">
</div>

<div class="form-group">
  <label for="exampleSelect">Select Input</label>
  <select class="form-control" id="exampleSelect">
    <option>Option 1</option>
    <option>Option 2</option>
    <option>Option 3</option>
  </select>
</div>

<div class="form-check">
  <input class="form-check-input" type="checkbox" value="" id="defaultCheck1">
  <label class="form-check-label" for="defaultCheck1">
    Checkbox
  </label>
</div>

<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios1" value="option1" checked>
  <label class="form-check-label" for="exampleRadios1">
    Radio Button 1
  </label>
</div>
<div class="form-check">
  <input class="form-check-input" type="radio" name="exampleRadios" id="exampleRadios2" value="option2">
  <label class="form-check-label" for="exampleRadios2">
    Radio Button 2
  </label>
</div>

2. 输入组

输入组允许你在输入框的前后添加文本、按钮或其他元素，以增强表单的交互性。

2.1 基本输入组

<div class="input-group mb-3">
  <div class="input-group-prepend">
    <span class="input-group-text" id="basic-addon1">@</span>
  </div>
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon1">
</div>

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

2.2 带按钮的输入组

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Search for..." aria-label="Search for...">
  <div class="input-group-append">
    <button class="btn btn-outline-secondary" type="button">Go</button>
  </div>
</div>

3. 实践练习

3.1 创建一个注册表单

使用 Bootstrap 创建一个简单的注册表单，包含用户名、电子邮件、密码和确认密码字段。每个字段都应该有相应的标签和占位符文本。

<form>
  <div class="form-group">
    <label for="username">Username</label>
    <input type="text" class="form-control" id="username" placeholder="Enter username">
  </div>
  <div class="form-group">
    <label for="email">Email address</label>
    <input type="email" class="form-control" id="email" placeholder="Enter email">
  </div>
  <div class="form-group">
    <label for="password">Password</label>
    <input type="password" class="form-control" id="password" placeholder="Password">
  </div>
  <div class="form-group">
    <label for="confirmPassword">Confirm Password</label>
    <input type="password" class="form-control" id="confirmPassword" placeholder="Confirm password">
  </div>
  <button type="submit" class="btn btn-primary">Register</button>
</form>

3.2 添加输入组

在注册表单中添加一个输入组，允许用户在输入用户名时自动添加 @example.com 后缀。

<div class="input-group mb-3">
  <input type="text" class="form-control" placeholder="Username" aria-label="Username" aria-describedby="basic-addon2">
  <div class="input-group-append">
    <span class="input-group-text" id="basic-addon2">@example.com</span>
  </div>
</div>

4. 总结

通过本教程，你已经学习了如何使用 Bootstrap 创建表单和输入组。表单是网页中不可或缺的部分，而 Bootstrap 提供了丰富的工具和样式，使得表单的创建和美化变得非常简单。希望你能通过实践练习进一步巩固所学知识，并在实际项目中灵活运用。

5. 下一步

接下来，你可以继续学习 Bootstrap 中的其他高级表单功能，如表单验证、自定义表单控件等。此外，还可以探索 Bootstrap 的响应式表单布局和表单控件样式，以进一步提升你的表单设计能力。